<template>
  <div class="search-container">
    <el-input v-model="searchForm.content" placeholder="搜索职位、公司" class="search-input">
      <template #append>
        <el-button type="primary" class="search-btn" @click="search">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script>
import { EventBus } from '@/util/event-bus.js'
import { searchInput } from '@/util/seeker_api/search_api'
import { debounce } from 'lodash';
import { mapState } from 'vuex'

export default {
  name: 'SearchInput',
  data() {
    return {
      selectedType: '', // 选中的职位类型
      searchText: '',// 搜索框输入内容
      searchForm: {
        content: '',
        location: ''
      },
      loading: false
    };
  },
  methods: {
    search() {
      this.searchForm.location = this.address
      this.$router.push({
        name: 'job',
        query: { searchForm: this.searchForm } // 参数会附加在 URL 中
      });
    }
  },
  computed: {
    ...mapState('seeker', {
      address: state => state.address
    })
  }
  
};
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  border: 2px solid #539790;
  /* 边框颜色，可根据实际调整 */
  border-radius: 8px;
  overflow: hidden;
  width: 80%;
  margin-left: 10%;
  
}

/* 使用深度选择器修改聚焦样式 */
:deep(.el-input__inner:focus) {
  border-color: #026e62 !important;
}

.job-type-select {
  border-right: 1px solid #41968d;
  /* 分割线 */
  width: 120px;
}


.search-input .el-input__inner {
  border: none;
  padding: 10px 12px;
}

.map-btn {
  border-left: 1px solid #41968d;
  /* 分割线 */
  border-right: 1px solid #41968d;
  /* 分割线 */
  background: #fff;
  color: #41968d;
}

.search-btn {
  background-color: #41968d;
  border: none;
  color: #fff;
}
</style>